<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地址</title>
    <link rel="stylesheet" href="../static/css/address.css">
    <script language="javascript" src="../static/js/pcasunzip.js" charset="gb2312"></script>
    <script src="../static/js/jQuery_3.7.1.js"></script>

</head>
<body>
<div class="address">
    <div>
        <h3>收货地址<span class="mo"><a href="findDefaultAddressServlet">订单结算</a> </span></h3>
        <div class="addAddress" onclick="showForm()">
            <img src="../static/images/addAddress.png" height="30" width="30"/>
            <p>添加新地址</p>
        </div>
    </div>
</div>
<!-- 添加收货地址 -->

<div id="overlay">
    <div id="addressForm">
        <span id="closeButton" onclick="closeForm()">×</span>
        <h1>新增收货地址</h1>
        <form th:action="@{/add}" method="post">
            <table>
                <tr>
                    <td>收货人</td>
                    <td><input type="text" name="username" placeholder="请填写收货人姓名"></td>
                </tr>
                <tr>
                    <td>选择地区</td>
                    <td>
                        <select name="province" id="province"></select>
                        <select name="city" id="city"></select>
                        <select name="county" id="area"></select>
                    </td>
                </tr>
                <tr>
                    <td>详细地址</td>
                    <td><input type="text" name="address" placeholder="街道、楼牌号等"></td>
                </tr>
                <tr>
                    <td>手机号码</td>
                    <td>
                        <input type="text" name="phone" placeholder="请填写收货人电话号">
                        <span id="phoneError" style="color:red; display:none;">格式错误</span>
                    </td>
                </tr>


                <tr>
                    <td colspan="2"><input type="submit" value="保存地址"></td>
                </tr>
            </table>
        </form>
        <script src="../static/js/address.js"></script>
    </div>
</div>
<script>
    $(document).ready(function () {
        // 获取相关元素
        const phoneInput = $("input[name='phone']");
        const phoneError = $("#phoneError");
        const submitButton = $("input[type='submit']");
        const form = $("#addressForm"); // 选择正确的表单元素

        // 验证手机号格式的函数
        function validatePhone() {
            const phonePattern = /^1[3-9]\d{9}$/; // 常见的中国大陆手机号格式
            const phoneValue = phoneInput.val().trim();

            if (!phonePattern.test(phoneValue)) {
                phoneError.show(); // 显示格式错误提示
                submitButton.prop("disabled", true); // 禁用提交按钮
            } else {
                phoneError.hide(); // 隐藏格式错误提示
                submitButton.prop("disabled", false); // 启用提交按钮
            }
        }

        // 在输入时验证手机号格式
        phoneInput.on("input", validatePhone);

        // 初始化时调用验证函数
        validatePhone();

        // 在表单提交时阻止提交，若格式错误
        form.on("submit", function (event) {
            if (submitButton.prop("disabled")) {
                event.preventDefault(); // 禁止提交
            }
        });
    });

</script>
<script language="javascript" defer>
    new PCAS("province", "city", "county", "--请选择省份--", "--请选择城市--", "--请选择地区--");
</script>
</body>
</html>